<template>
  <div class="nav_outer">
    <Header>明细</Header>
    <div class="content">
        <div class="details">
            <div class="detail flex_bet" v-for="item in details" v-bind:key="item.id" :data-id="item.id">
                <div>
                    <p :class="{'type':true,'red': item.type!=1}"><i>{{item.type==1?'J':'*'}}</i> {{item.typeName}}</p>
                    <p>{{item.overTimeDate | splidate}} 周{{ item.overTimeDate  | week}}</p>
                </div>
                <div :class="{'time':true,'red': item.type!=1}">
                    {{ item.overTime }}
                </div>
            </div>
            <div class="refresh"></div>
        </div>
    </div>
  </div>
</template>

<script>
import Header from '@/components/commonComponents/Header'
export default {
  data() {
    return {
      pageNum: 1,
      pageSize: 10,
      loading: false,
      totalPage: 1,
      details:[]
    }
  },
  mounted() {
    let mui = this.mui,
      that = this;
    this.interactive.reachBottomLoad({
     callback: function(){
       if(that.loading){
          return;
      }
      that.pageNum+=1;
      that.loadDetails();
    }})
    mui(".details").on("tap", ".detail", function() {
        var id = this.getAttribute("data-id");
        that.$router.push({ path: "overtimeedit/" + id });
      });
  },
  created() {
    this.loadDetails();
  },
  methods: {
    loadDetails() {
      let that = this;
      if (this.pageNum > this.totalPage || this.loading) {
        return;
      }
      that.loading = true;
      that.Http.get("/yzj/app/over_time", {
        current: that.pageNum,
        size: that.pageSize,
        type: ''
      }).then(
        res => {
          if (that.pageNum == 1) {
            that.details = res.object;
          } else {
            that.details = that.details.concat(res.object);
          }
          that.totalPage = res.totalPage;
          
          that.loading = false;
        },
        () => {
          that.loading = false;
        }
      );
    },
   chooseDate(){
     let that = this;
      this.dtPicker.show(function (selectItems) { 
        that.overTimeDate = selectItems.value;
      })
   }
  },
  components: {
    Header
  }
}
</script>

<style scoped lang='scss'>
  @function px2em($px) {
    @if (unitless($px)) {
      @return px2em($px + 0px);
    } @else if (unit($px) == em) {
      @return $px;
    }
    @return ($px / 75px) * 1rem;
  }
  .red>i,.red{color:#1DD882!important;}
  .switch{
        position: fixed;
        color: #406FFF;
        border: 1px solid #406FFF;
        border-radius: 4px;
        font-size: 10px;
        top: 0.6rem;
        left: 56%;
        z-index: 1000;
        padding: 0 2px;
        background: #fff;
    }
  .content{
    .details{
      background: #fff;
      .detail{
        border-top:2px solid #F5F5F5;
        padding: 0 px2em(80); 
      }
      p{
        margin: px2em(15) 0;
      }
      .type{
        color: #000;
        font-size: 1.1em;
      }
      i{
        color: #FAD01D;
        font-style: normal;
        font-weight:bold;
      }
      .time{
        color: #FF3A3A;
        font-size: 1.2em;
      }
    }
  }
</style>